<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>收银管理</title>
    <link rel="stylesheet" href="../../elementUI/index.css">
    <link rel="stylesheet" href="../../css/index.css">
    <style scoped>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .search-box {
            width: 400px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            /* 圆角半径 */
            outline: none;
        }

        input[type="search"] {
            background-image: url('../../admin/images/Search.png');
            background-position: right center;
            background-repeat: no-repeat;
            padding-right: 20px;
            background-size: 20px;
        }

        .product-list {
            text-align: center;
        }

        .product-item {
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid #f7f7f7;
        }

        .head {
            width: 90%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            margin: auto;
        }

        .el-card__body,
        .el-main {
            padding: 0;
            height: 100%;
        }

        .el-card {
            background-color: white;
        }

        .goods {
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            border-bottom: 1px solid #f7f7f7;
        }

        .el-button.is-round {
            width: 22%;
            position: absolute;
            bottom: 57px;
            right: 6%;
        }

        .calculator {
            padding: 10px;
        }

        .display {
            background-color: #f6f6f6;
            padding: 10px;
            border-radius: 5px;
            text-align: right;
            font-size: 1.5em;
            margin-bottom: 40px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            height: 107px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .keyboard {
            display: grid;
            grid-gap: 5px;
        }

        .row {
            display: flex;
            justify-content: space-around;
        }

        .btn {
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 78px;
            height: 50px;
        }

        .btn-primary {
            background-color: #007bff;
            color: #fff;
        }

        .btn-danger {
            background-color: #dc3545;
            color: #fff;
        }

        .btn-primary:hover,
        .btn-danger:hover {
            filter: brightness(90%);
        }

        .products-container {
            height: 85%;
            width: 98%;
            position: relative;
            z-index: 999;
        }

        .products-card {
            height: 85%;
            width: 100%;
        }

        .header {
            display: flex;
            justify-content: space-between;
        }

        .clear-button {
            cursor: pointer;
        }

        .order-card {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ebeef5;
            flex: 0 0 33%;
            max-width: 30%;
            margin: 4px;
        }

        .order-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            height: 10%;
        }

        .countdown {
            margin-left: 10px;
        }

        .remove-button {
            cursor: pointer;
        }

        .item-info {
            margin-bottom: 5px;
        }

        .item {
            display: flex;
            justify-content: space-around;
        }

        .item-name {
            flex: 1;
        }

        .item-quantity {
            margin-left: 10px;
        }

        .item-price {
            margin-left: 10px;
        }

        .order-total {
            height: 10%;
        }

        .total-price {
            background-color: #409EFF;
            color: #FFFFFF;
            border: none;
            padding: 8px 16px;
            margin-top: 10px;
            border-radius: 18px;
            transition: background-color 0.3s;
            display: block;
            margin: 0 auto;
            width: 80%;
        }

        .total-price:hover {
            background-color: #66B1FF;
        }

        .mask {
            height: 100%;
            width: 100%;
            background-color: #000000b4;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
        }

        .popup {
            position: fixed;
            z-index: 9999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30%;
            height: 50%;
            background-color: white;
        }

        .popup-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            width: 90%;
            margin: auto;
        }

        .pay-but {
            background-color: #409EFF;
            color: #FFFFFF;
            border: none;
            padding: 8px 16px;
            margin-top: 10px;
            border-radius: 18px;
            transition: background-color 0.3s;
            display: block;
            margin: 0 auto;
            width: 80%;
            margin-bottom: 10%;
        }

        .el-table::before {
            left: 0;
            bottom: 0;
            width: 95%;
            height: 1px;
        }

        .el-table__empty-text {
            line-height: 60px;
            width: 50%;
            color: #909399;
            margin-right: 10%;
        }

        .pay-item {
            width: 20%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }

        .pay-item:last-child {
            border-right: none;
        }
    </style>
</head>

<body>
    <div id="app" class="minWidth">
        <!-- 商品输入列表 -->
        <div style="display: flex;height: 95%;position: absolute;width: 95%;">
            <el-card
                style="width: 65%;border-bottom: 1px solid #f7f7f7;padding: 20px; display: flex; flex-direction: column; overflow-y: auto;">
                <!-- 搜索、手动输入 -->
                <div
                    style="display: flex;justify-content: space-around;align-items: center;border-bottom: 1px solid #f7f7f7; position: sticky; top: 0; background-color: white; z-index: 1;">
                    <div>
                        <input type="search" placeholder="Search..." class="search-box">
                    </div>
                    <div @click="showCalculator()">手动输入</div>
                    <div @click="showProducts = !showProducts">查看挂单</div>
                </div>
                <!-- 商品列表 -->
                <el-table :data="products" style="width: 100%;margin-left: 4%;">
                    <el-table-column width="180">
                        <template slot-scope="scope">
                            <div>{{ scope.row.name }}</div>
                            <div>{{ scope.row.code }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" width="180" :formatter="formatPrice">
                    </el-table-column>
                    <el-table-column width="250">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.quantity" @change="handleChange(scope.row)" :min="1"
                                :max="10" label="描述文字"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column width="100">
                        <template slot-scope="scope">
                            <i class="el-icon-delete" @click="deleteProduct(scope.row)"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <div @click="clearProducts" style="position: absolute; bottom: 63px; left: 28%; padding: 5px;">清空商品
                </div>
            </el-card>
            <!-- 结算页面 -->
            <el-card id="normalContent" style="margin-left: 5px;width: 30%;">
                <!-- 正常结算页面 -->
                <div>
                    <!-- 会员登录、挂单-->
                    <div style="background-color: #686b75;width: 100%;">
                        <div class="head">
                            <div></div>
                            <div style="margin-left: 20px;">
                                <button
                                    style="color: white;border-radius: 20px;border: 1px white solid;background-color: transparent;padding: 5px;">会员登录</button>
                            </div>
                            <div>挂单</div>
                        </div>
                    </div>
                    <!-- 商品、应付、优惠 -->
                    <div style="padding: 20px;">
                        <div class="goods">
                            <div>商品</div>
                            <div>{{ totalQuantity }}件</div>
                        </div>
                        <div class="goods">
                            <div>应付</div>
                            <div>￥{{ totalPrice }}</div>
                        </div>
                        <div class="goods">
                            <div>优惠金额</div>
                            <div>￥{{ discount }}</div>
                        </div>
                    </div>
                    <!-- 实收 -->
                    <div style="text-align: center;">
                        <div>实收</div>
                        <div style="font-size: 30px;">{{ total }}</div>
                    </div>
                    <!-- 优惠券 -->
                    <div style="padding: 20px;">
                        <el-collapse v-model="activeName" accordion>
                            <el-collapse-item @click="toggleDiscountStatus" :title="discountTitle" name="1">
                                <div style="text-align: center;">
                                    <div style="display: flex; justify-content: center; flex-wrap: wrap;">
                                        <div v-for="discountOption in discountOptions" :key="discountOption.value"
                                            @click="updateDiscount(discountOption.value)"
                                            :style="{ 'border': '1px solid ' + (discountOption.selected ? 'blue' : 'lightgray'), 'padding': '10px', 'margin': '5px', 'cursor': 'pointer', 'width': 'calc(33.33% - 10px)' }">
                                            {{ discountOption.label }}
                                        </div>
                                    </div>
                                </div>
                            </el-collapse-item>
                            <!-- <el-collapse-item title="添加优惠券" name="2">
                        </el-collapse-item> -->
                        </el-collapse>
                    </div>
                    <!-- 结算 -->
                    <div>
                        <el-button type="primary" round width="250" @click="showPopup">立即结算</el-button>
                    </div>
                </div>
            </el-card>
            <el-card id="calculatorContent" style="margin-left: 5px;width: 30%; display: none;">
                <!-- 电子计算器内容 -->
                <div style="text-align: center;">
                    <div style="background-color: #686b75;width: 100%;">
                        <div class="head">
                            <div @click="hideCalculator">×</div>
                            <div>手动输入</div>
                            <div></div>
                        </div>
                    </div>
                    <div class="calculator">
                        <div class="display">
                            <div>¥</div>
                            <div
                                v-bind:style="{ color: displayNumber === '请输入金额' ? 'lightgrey' : 'black', fontSize: '22px' }">
                                {{ displayNumber === '请输入金额' ? '请输入金额' : displayNumber.toLocaleString() }}</div>
                        </div>
                    </div>
                    <div class="keyboard">
                        <div class="row">
                            <button class="btn btn-primary" @click="appendToDisplay(1)">1</button>
                            <button class="btn btn-primary" @click="appendToDisplay(2)">2</button>
                            <button class="btn btn-primary" @click="appendToDisplay(3)">3</button>
                        </div>
                        <div class="row">
                            <button class="btn btn-primary" @click="appendToDisplay(4)">4</button>
                            <button class="btn btn-primary" @click="appendToDisplay(5)">5</button>
                            <button class="btn btn-primary" @click="appendToDisplay(6)">6</button>
                        </div>
                        <div class="row">
                            <button class="btn btn-primary" @click="appendToDisplay(7)">7</button>
                            <button class="btn btn-primary" @click="appendToDisplay(8)">8</button>
                            <button class="btn btn-primary" @click="appendToDisplay(9)">9</button>
                        </div>
                        <div class="row">
                            <button class="btn btn-primary" @click="appendToDisplay(0)">0</button>
                            <button class="btn btn-primary" @click="appendToDisplay('.')">.</button>
                            <button class="btn btn-danger" @click="deleteLastCharacter()">删除</button>
                        </div>
                    </div>
                </div>
                <div>
                    <el-button type="primary" round width="250">保存</el-button>
                </div>
            </el-card>
        </div>
        <!-- 查看挂单 -->
        <div v-if="showProducts" class="products-container">
            <el-card class="products-card">
                <div slot="header" class="header">
                    <div @click="goBack">
                        <i class="el-icon-arrow-left"></i> 返回
                    </div>
                    <div>
                        {{ orders.length }} 挂单
                    </div>
                    <div @click="clearOrders" class="clear-button">
                        清空
                    </div>
                </div>
                <div style="display: flex;overflow-x: auto;height: 580px;">
                    <el-card v-for="(order, orderIndex) in orders" :key="orderIndex" class="order-card">
                        <div class="order-info">
                            <!-- 倒计时 -->
                            <div>
                                <i class="el-icon-timer" style="color: #d7d7d7;"></i>
                                <div class="countdown"></div>
                            </div>
                            <!-- 商品总数 -->
                            <div>{{getTotalItems(order)}}件商品</div>
                            <div @click="removeOrder(orderIndex)" class="remove-button">删除</div>
                        </div>
                        <div style="height: 80%;">
                            <div v-for="(item , index) in order.items" :key="index" class="item-info">
                                <div class="item">
                                    <!-- 商品 -->
                                    <div class="item-name">{{item.name}}</div>
                                    <!-- 数量 -->
                                    <div class="item-quantity">x{{item.quantity}}</div>
                                    <!-- 价格 -->
                                    <div class="item-price">￥{{item.price}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="order-total">
                            <!-- 订单总价按钮 -->
                            <button class="total-price">合计￥{{getTotalPrice(order)}}</button>
                        </div>
                    </el-card>
                </div>
            </el-card>
        </div>
        <div class="mask" v-show="isPopupVisible" @click="hidePopup"></div>

        <div class="popup" id="popup" v-show="isPopupVisible">
            <div style="background-color: #5293ff;">
                <div class="popup-content" id="title" style="display: flex; cursor: move;">
                    <div @click="hidePopup" style="font-size: 30px; cursor: pointer;">×</div>
                    <div style="margin-right: 10px;font-size: 20px;">实收：{{ total }}</div>
                    <div></div>
                </div>
            </div>
            <div>
                <div style="display: flex;height: 65px;">
                    <div v-for="(item,index) in pay" :key="index" class="pay-item">
                        <img :src="item.icon" alt="" style="height: 20px;width: 20px;">
                        <div>{{ item.text }}</div>
                    </div>
                </div>
                <!-- <div v-for="(item, index) in pay" :key="'content-'+index" class="content" v-show="selected === index">
                    <p>{{ item.content }}</p>
                </div> -->
                <div style="font-size: 35px;text-align: center;margin-top: 20px;color: #5f89cc;">{{total}}</div>
            </div>
            <div
                style="position: absolute;bottom: 0;height: 15%; display: flex;justify-content: center;align-items: center; width: 100%;">
                <button class="pay-but">确认支付</button>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../js/utils.js"></script>
    <script type="text/javascript" src="./js/CashierManagement.js"></script>
</body>

</html>